<template>
    <div class="rectificationObject">
        <div class="search-from flex justify-between">
            <el-form :inline="true" :model="searchFrom">
                <el-form-item label="诊改对象名称：">
                    <el-input v-model="searchFrom.objectName" placeholder="请输入诊改对象名称"></el-input>
                </el-form-item>
                <el-form-item label="所属层面：">
                    <el-select v-model="searchFrom.objectType" placeholder="请选择层面" @change="changeIndexX">
                        <el-option v-for="(item,index) in rangeList" :key="index" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属适用范围：">
                    <el-cascader
                            v-model="searchFrom.rangeId"
                            :options="rectificationRange"
                            :show-all-levels="false"
                            :props="{label: 'name',value: 'id', children: 'subList'}">
                    </el-cascader>
                </el-form-item>
                <!-- TODO -->
                <el-form-item label="是否参与诊改：">
                    <el-select v-model="searchFrom.indexOne" clearable placeholder="请选择是否参与诊改">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button v-has="237" type="success" @click="handle('add')">添加</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div>
            <!-- 表格 -->
            <myTable
                    :column="column"
                    :tableData="tableData"
                    @changePage="changePage">
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handle('edit', scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </myTable>
        </div>
    </div>
</template>

<script>
    import myTable from '@/components/table/index.vue'
    import { getRectificationObjectList } from '@/api/systemManage';
    import { filterParams, getStorage } from '@/config/utils';
    export default {
        name: 'rectificationObject',
        components: {
            myTable
        },
        data () {
            return {
                searchFrom: {
                    objectType: '',
                    objectName: '',
                    rangeId: '',
                    pageSize: 10,
                    pageIndex: 1,
                },
                // TODO 后台字段有问题
                column: [
                    {
                        prop: 'objectName',
                        label: '诊改对象名称'
                    },
                    {
                        prop: 'objectType',
                        label: '所属层面'
                    },
                    {
                        prop: 'indexThree',
                        label: '所属适用范围'
                    },
                    {
                        prop: 'orgId',
                        label: '责任部门'
                    },
                    {
                        prop: 'intension',
                        label: '负责人'
                    },
                    {
                        prop: 'valid',
                        label: '是否参与诊改',
                        asyncData: this.$config.yesOrNo
                    }
                ],
                tableData: [],
                rectificationRange: []// 适用范围
            }
        },
        computed: {
            // 适用范围
            rangeList () {
                let temp = getStorage('rangeList');
                temp.forEach(item => {
                    item.id = 0;
                    item.subList = [...item.rectificationRangeDTOList];
                });
                return temp
            }
        },
        methods: {
            // 查询质控点列表
            getList() {
                let params = filterParams(this.searchFrom);
                getRectificationObjectList(params).then(res => {
                    this.tableData = res.dataList || [];
                    // console.log( this.tableData);
                }).catch(() => {
                })
            },
            // 搜索
            search (searchFrom) {
                this.searchFrom.pageIndex = 1;
                this.searchFrom.indexOne = searchFrom.indexOne;
                this.searchFrom.indexTwo = searchFrom.indexTwo;
                this.searchFrom.indexThree = searchFrom.indexThree;
                this.searchFrom.name = searchFrom.name;
                this.searchFrom.belongPart = searchFrom.belongPart;
                this.getList();
            },
            // 切换分页
            changePage(searchForm) {
                this.searchFrom.pageIndex = searchForm.pageIndex;
                this.searchFrom.pageSize = searchForm.pageSize;
                this.getList()
            },
            changeIndexX (val) {
                // console.log(val, this.rangeList);
                let temp = this.rangeList.filter(item => {
                    if (item.code == val) {
                        return item.rectificationRangeDTOList
                    }
                })
                if (temp.length) {
                    this.rectificationRange = temp[0].subList
                }
                // console.log(this.rectificationRange);
            },
            handle (type, data) {

            }
        },
        created () {

        }
    }
</script>

<style scoped>

</style>
